<template>
    <el-cascader
        :key="version"
        v-model="categories"
        v-loading="loading"
        :show-all-levels="false"
        :clearable="props.clearable !== false"
        :filterable="props.filterable !== false"
        :props="propsData"
        :options="industryData"
        :disabled="isDisabled"
        @change="selectEvent"
    ></el-cascader>
</template>
<script>
import {examBase} from "@/layout/mixin/examBase";
import {get} from "@/api/request";
import {treeList2Tree, treeDataProcess} from "@/utils";

export default {
    mixins: [examBase],
    props: {
        categoryIds: {
            type: Array,
            default: () => []
        },
        props: {
            type: Object,
            require: false,
            default: () => ({})
        },
        isDisabled: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            selectCategoryId: null,
            loading: false,
            propsData: {},
            version: 0,
            categories: null,
        };
    },
    watch: {
        categoryIds(arr) {
            this.categories = arr;
            this.init();
        },
        industryData(newVal) {
            this.version++ //只要监听到数据源发生变化 ，改变version的值，达到重新渲染的效果
        }
    },
    created() {
        this.categories = this.categoryIds;
        this.init();
        this.propsData = {
            value: "id",
            label: "name",
            emitPath: false,
            checkStrictly: false,
            lazy: true,
            lazyLoad: (node, resolve) => {
                const {level} = node;
                if (node.data && node.data.loaded) {
                    resolve([]);
                    return;
                }
                if (level === 1) {
                    this.loadExamForRule(node.data.id).then(res => {
                        if (res.length === 0) {
                            this.$set(node.data, "disabled", "disabled");
                        }
                        resolve(res);
                    });
                } else if (level === 2) {
                    this.loadCategory(node.data.id).then(res => {
                        if (res.length === 0) {
                            this.$set(node.data, "disabled", "disabled");
                        }
                        resolve(res);
                    });
                } else {
                    resolve([]);
                }
            },
            ...this.props
        };
    },
    methods: {
        async init() {
            const categoryDerais = await Promise.all(this.categories.map(v => get(
                `/exam/category/detail/${v}`
            )));
            const examIds = new Set(categoryDerais.map(v => v.examId));
            const industryIds = new Set(categoryDerais.map(v => v.industryId));
            await this.loadIndustryForRule().then(() => {
                this.industryData.push({
                    id: "gjtk",
                    name: "高教题库",
                    disabled: true,
                });
            });
            await Promise.all([...industryIds].map(industryId => this.loadExamForRule(industryId).then(examData => {
                for (let ind of this.industryData) {
                    if (industryId === ind.id) {
                        ind.loaded = true;
                        this.$set(ind, "children", examData);
                        break;
                    }
                }
            })));
            await Promise.all([...examIds].map(examId => this.loadCategory(examId).then(categorys => {
                const data = categorys.length === 0 ? null : categorys[0];
                if (!data) return;
                for (let ind of this.industryData) {
                    if (data.industryId === ind.id) {
                        for (let exam of ind.children) {
                            if (exam.id === data.examId) {
                                exam.loaded = true;
                                this.$set(exam, "children", categorys);
                            }
                        }
                        break;
                    }
                }
            })));
        },
        selectEvent(vl) {
            this.$emit("operate-category", vl);
        }
    }
};
</script>
